<div class="blazorise-codeblock">
<div class="html"><pre>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">LineChart</span> <span class="htmlAttributeName"><span class="atSign">&#64;</span>ref</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>horizontalLineChart</span><span class="quot">&quot;</span> <span class="htmlAttributeName">TItem</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">LiveDataPoint</span><span class="quot">&quot;</span> <span class="htmlAttributeName">OptionsObject</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>horizontalLineChartOptions</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">ChartStreaming</span> <span class="htmlAttributeName"><span class="atSign">&#64;</span>ref</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>chartStreaming</span><span class="quot">&quot;</span>
                    <span class="htmlAttributeName">TItem</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">LiveDataPoint</span><span class="quot">&quot;</span>
                    <span class="htmlAttributeName">Options</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">new ChartStreamingOptions { Delay = 2000 }</span><span class="quot">&quot;</span>
                    <span class="htmlAttributeName">Refreshed</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>OnHorizontalLineRefreshed</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">LineChart</span><span class="htmlTagDelimiter">&gt;</span>

<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Row</span><span class="htmlTagDelimiter">&gt;</span>
    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Column</span><span class="htmlTagDelimiter">&gt;</span>
        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Button</span> <span class="htmlAttributeName">Color</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">Color</span><span class="enumValue">.Primary</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Clicked</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue"><span class="atSign">&#64;</span>(()=&gt;chartStreaming.Pause())</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>Pause<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Button</span><span class="htmlTagDelimiter">&gt;</span>
        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Button</span> <span class="htmlAttributeName">Color</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">Color</span><span class="enumValue">.Primary</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Clicked</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue"><span class="atSign">&#64;</span>(()=&gt;chartStreaming.Play())</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>Play<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Button</span><span class="htmlTagDelimiter">&gt;</span>
    <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Column</span><span class="htmlTagDelimiter">&gt;</span>
<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Row</span><span class="htmlTagDelimiter">&gt;</span>
</pre></div>
<div class="csharp"><pre>
<span class="atSign">&#64;</span>code{
    LineChart&lt;LiveDataPoint&gt; horizontalLineChart;
    ChartStreaming&lt;LiveDataPoint&gt;  chartStreaming;
    Random random = <span class="keyword">new</span> Random( DateTime.Now.Millisecond );

    <span class="keyword">string</span>[] Labels = { <span class="string">&quot;Red&quot;</span>, <span class="string">&quot;Blue&quot;</span>, <span class="string">&quot;Yellow&quot;</span>, <span class="string">&quot;Green&quot;</span>, <span class="string">&quot;Purple&quot;</span>, <span class="string">&quot;Orange&quot;</span> };
    List&lt;<span class="keyword">string</span>&gt; backgroundColors = <span class="keyword">new</span> List&lt;<span class="keyword">string</span>&gt; { ChartColor.FromRgba( <span class="number">255</span>, <span class="number">99</span>, <span class="number">132</span>, <span class="number">0</span>.2f ), ChartColor.FromRgba( <span class="number">54</span>, <span class="number">162</span>, <span class="number">235</span>, <span class="number">0</span>.2f ), ChartColor.FromRgba( <span class="number">255</span>, <span class="number">206</span>, <span class="number">86</span>, <span class="number">0</span>.2f ), ChartColor.FromRgba( <span class="number">75</span>, <span class="number">192</span>, <span class="number">192</span>, <span class="number">0</span>.2f ), ChartColor.FromRgba( <span class="number">153</span>, <span class="number">102</span>, <span class="number">255</span>, <span class="number">0</span>.2f ), ChartColor.FromRgba( <span class="number">255</span>, <span class="number">159</span>, <span class="number">64</span>, <span class="number">0</span>.2f ) };
    List&lt;<span class="keyword">string</span>&gt; borderColors = <span class="keyword">new</span> List&lt;<span class="keyword">string</span>&gt; { ChartColor.FromRgba( <span class="number">255</span>, <span class="number">99</span>, <span class="number">132</span>, 1f ), ChartColor.FromRgba( <span class="number">54</span>, <span class="number">162</span>, <span class="number">235</span>, 1f ), ChartColor.FromRgba( <span class="number">255</span>, <span class="number">206</span>, <span class="number">86</span>, 1f ), ChartColor.FromRgba( <span class="number">75</span>, <span class="number">192</span>, <span class="number">192</span>, 1f ), ChartColor.FromRgba( <span class="number">153</span>, <span class="number">102</span>, <span class="number">255</span>, 1f ), ChartColor.FromRgba( <span class="number">255</span>, <span class="number">159</span>, <span class="number">64</span>, 1f ) };

    <span class="keyword">public</span> <span class="keyword">struct</span> LiveDataPoint
    {
        <span class="keyword">public</span> <span class="keyword">object</span> X { <span class="keyword">get</span>; <span class="keyword">set</span>; }

        <span class="keyword">public</span> <span class="keyword">object</span> Y { <span class="keyword">get</span>; <span class="keyword">set</span>; }
    }

    <span class="keyword">object</span> horizontalLineChartOptions = <span class="keyword">new</span>
    {
        Scales = <span class="keyword">new</span>
        {
            Y = <span class="keyword">new</span>
            {
                Title = <span class="keyword">new</span>
                {
                    Display = <span class="keyword">true</span>,
                    Text = <span class="string">&quot;Value&quot;</span>
                }
            }
        },
        Interaction = <span class="keyword">new</span>
        {
            intersect = <span class="keyword">false</span>
        }
    };

    <span class="keyword">protected</span> <span class="keyword">override</span> <span class="keyword">async</span> Task OnAfterRenderAsync( <span class="keyword">bool</span> firstRender )
    {
        <span class="keyword">if</span> ( firstRender )
        {
            <span class="keyword">await</span> Task.WhenAll(
                HandleRedraw( horizontalLineChart, GetLineChartDataset1 ) );
        }
    }

    <span class="keyword">async</span> Task HandleRedraw&lt;TDataSet, TItem, TOptions, TModel&gt;( BaseChart&lt;TDataSet, TItem, TOptions, TModel&gt; chart, <span class="keyword">params</span> Func&lt;TDataSet&gt;[] getDataSets )
        <span class="keyword">where</span> TDataSet : ChartDataset&lt;TItem&gt;
        <span class="keyword">where</span> TOptions : ChartOptions
        <span class="keyword">where</span> TModel : ChartModel
    {
        <span class="keyword">await</span> chart.Clear();

        <span class="keyword">await</span> chart.AddLabelsDatasetsAndUpdate( Labels, getDataSets.Select( x =&gt; x.Invoke() ).ToArray() );
    }

    LineChartDataset&lt;LiveDataPoint&gt; GetLineChartDataset1()
    {
        <span class="keyword">return</span> <span class="keyword">new</span> LineChartDataset&lt;LiveDataPoint&gt;
        {
            Data = <span class="keyword">new</span> List&lt;LiveDataPoint&gt;(),
            Label = <span class="string">&quot;Dataset 1 (linear interpolation)&quot;</span>,
            BackgroundColor = backgroundColors[<span class="number">0</span>],
            BorderColor = borderColors[<span class="number">0</span>],
            Fill = <span class="keyword">false</span>,
            Tension = <span class="number">0</span>,
            BorderDash = <span class="keyword">new</span> List&lt;<span class="keyword">int</span>&gt; { <span class="number">8</span>, <span class="number">4</span> },
        };
    }

    Task OnHorizontalLineRefreshed( ChartStreamingData&lt;LiveDataPoint&gt; data )
    {
        data.Value = <span class="keyword">new</span> LiveDataPoint
        {
            X = DateTime.Now,
            Y = RandomScalingFactor(),
        };

        <span class="keyword">return</span> Task.CompletedTask;
    }

    <span class="keyword">double</span> RandomScalingFactor()
    {
        <span class="keyword">return</span> ( random.NextDouble() &gt; <span class="number">0</span>.<span class="number">5</span> ? <span class="number">1</span>.<span class="number">0</span> : -<span class="number">1</span>.<span class="number">0</span> ) * Math.Round( random.NextDouble() * <span class="number">100</span> );
    }
}
</pre></div>
</div>
